/*
@title: colorconnect
@description: Color Connect is a simple puzzle game where your objective is to connect pairs of circles of the same color using lines. The challenge lies in ensuring that these lines do not cross each other, and every square in the grid must be filled.
@author: Newton
@tags: []
@addedOn: 2024-09-16
   ___      _                ___                            _   
  / __\___ | | ___  _ __    / __\___  _ __  _ __   ___  ___| |_ 
 / /  / _ \| |/ _ \| '__|  / /  / _ \| '_ \| '_ \ / _ \/ __| __|
/ /__| (_) | | (_) | |    / /__| (_) | | | | | | |  __/ (__| |_ 
\____/\___/|_|\___/|_|    \____/\___/|_| |_|_| |_|\___|\___|\__|

                                                                
Color Connect is a simple game: Your goal is to connect
each two cirles of the same color with a line without crossing
an other line. Every square of the grid has to be filled.

--------------------------------------------------------------------------------

Controls:
W -> move cursor up
A -> move cursor left
S -> move cursor back
D -> move cursor right

I -> select square (see below)
J -> previous level
K -> show help
L -> next level

reactions of selecting a square
circle (empty) -> start drawing a color line from there, move with WASD 
                  to draw the line
circle (full)  -> clear the drawn lines of this color

--------------------------------------------------------------------------------

!!! WARNING !!!
Due to my limited JavaScript knowledge, my hate against it and the limitations 
of this framework, the code is very unclean and may cause eye cancer :(

--------------------------------------------------------------------------------

*/

const circle_bitmap = bitmap`
....00000000....
...0000000000...
..000......000..
.00..........00.
000..........000
00............00
00............00
00............00
00............00
00............00
00............00
000..........000
.00..........00.
..000......000..
...0000000000...
....00000000....`
const circle_full_bitmap = bitmap`
....00000000....
...0000000000...
..000000000000..
.00000000000000.
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
.00000000000000.
..000000000000..
...0000000000...
....00000000....`
const line_bitmap = bitmap`
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000`

const start_screen = [
  bitmap`
................
................
................
...7777777777777
...7777777777777
...7777777777777
...7777777777777
...7777777777777
...7777777777777
...7777777777777
...7777777777777
...7777777777777
...777777777....
...777777777....
...777777777....
...777777777....`, bitmap`
................
................
................
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
................
................
................
................`, bitmap`
................
................
................
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
................
................
................
................`, bitmap`
................
................
................
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
................
................
................
................`, bitmap`
................
................
..........77777.
7777777..7777777
7777777.77777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777777777777
7777777.77777777
7777777..7777777
..........77777.
................
................
................`, bitmap`
................
................
................
................
7...............
77..............
77..............
77..............
77..............
77..............
7...............
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
....99999.......
...9999999..9999
..999999999.9999
.999999999999999
.999999999999999
.999999999999999
.999999999999999
.999999999999999
..999999999.9999
...9999999..9999
....99999.......
................
................
................`, bitmap`
................
................
................
9999999999999999
9999999999999999
9999999999999999
9999999999999999
9999999999999999
9999999999999999
9999999999999999
9999999999999999
9999999999999999
................
................
................
................`, bitmap`
................
................
................
9999999999999...
9999999999999...
9999999999999...
9999999999999...
9999999999999...
9999999999999...
9999999999999...
9999999999999...
9999999999999...
....999999999...
....999999999...
....999999999...
....999999999...`,
  bitmap`
...777777777....
...777777777....
...777777777....
...777777777....
...777777777....
...777777777....
.....77777......
....7777777.....
...777777777....
..77777777777...
..77777777777...
..77777777777...
..77777777777...
..77777777777...
...777777777....
....7777777.....`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
...........33333
...........33333
.........3333333
.........3333333
.........333333.
.........333333.
.........3333...
.........3333...
.........3333...
.........3333...
.........3333...
.........3333...
.........3333...
.........3333...
.........333333.`, bitmap`
................
333......9999999
333......9999999
33333..999999999
33333..999999999
.......999999...
.......999999...
.......9999.....
.......9999.....
.......9999.....
.......9999.....
.......9999.....
.......9999.....
.......9999.....
.......9999.....
.......999999...`, bitmap`
................
99999......66...
99999......66...
9999999..6666...
9999999..6666...
.999999..6666...
.999999..6666...
...9999..6666...
...9999..6666...
...9999..6666...
...9999..6666...
...9999..6666...
...9999..6666...
...9999..6666...
...9999..6666...
.999999..666666.`, bitmap`
................
.........4444444
.........4444444
.......444444444
.......444444444
.......444444...
.......444444...
.......4444.....
.......4444.....
.......4444.....
.......4444.....
.......4444.....
.......4444.....
.......4444.....
.......4444.....
.......444444...`, bitmap`
................
44444......77777
44444......77777
4444444..7777777
4444444..7777777
.444444..7777...
.444444..7777...
...4444..7777...
...4444..7777...
...4444..7777..7
...4444..7777..7
...4444..7777777
...4444..7777777
...4444..7777777
...4444..7777777
.444444..7777777`, bitmap`
................
777.............
777.............
77777...........
77777...........
.7777...........
.7777...........
.7777...........
.7777...........
77777...........
77777...........
777.............
777.............
7...............
7...............
777.............`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap` 
....999999999...
....999999999...
......99999.....
.....9999999....
....999999999...
...99999999999..
...99999999999..
...99999999999..
...99999999999..
...99999999999..
....999999999...
.....9999999....
......99999.....
................
................
................`,
  bitmap`
.....77777......
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
..........333333
..........333333
........33333333
........33333333
........333333..`, bitmap`
.........333333.
.........3333333
.........3333333
...........33333
...........33333
................
................
................
................
................
................
33......99999999
33......99999999
3333..9999999999
3333..9999999999
......999999....`, bitmap`
.......999999...
33333..999999999
33333..999999999
333......9999999
333......9999999
................
................
................
................
................
................
9999......66....
9999......66....
999999..666666..
999999..666666..
999999..66666666`, bitmap`
.999999..666666.
9999999..6666666
9999999..6666666
99999......66666
99999......66666
................
................
................
................
................
................
....66......44..
....66......44..
....6666..444444
....6666..444444
....6666..444444`, bitmap`
.......444444...
66666..444444444
66666..444444444
666......4444444
666......4444444
................
................
................
................
................
................
......44......77
......44......77
......4444..7777
......4444..7777
44....4444..7777`, bitmap`
.444444..7777777
4444444..7777..7
4444444..7777..7
44444......77...
44444......77...
................
................
................
................
................
................
777777......3333
777777......3333
77777777..333333
77777777..333333
77........333333`, bitmap`
777.............
77777...........
77777...........
.7777...........
.7777...........
................
................
................
................
................
................
3333......999999
3333......999999
333333..99999999
333333..99999999
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
9999999999......
9999999999......
999999999999....
999999999999....
9999............`, bitmap`
................
................
................
................
................
......33333.....
.....3333333....
....333333333...
...33333333333..
...33333333333..
...33333333333..
...33333333333..
...33333333333..
....333333333...
.....3333333....
......33333.....`,
  bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
.....66666......
....6666666.....`, bitmap`
........333333..
........3333....
........3333....
........3333....
........3333....
........3333....
........3333....
........3333....
........3333....
........333333..
........333333..
........33333333
........33333333
..........333333
..........333333
................`, bitmap`
......999999....
......9999......
......9999......
......9999......
......9999......
......9999......
......9999......
......9999......
......9999......
......999999....
......999999....
3333..9999999999
3333..9999999999
33......99999999
33......99999999
................`, bitmap`
999999..66666666
..9999..66666666
..9999..66666666
..9999..6666..66
..9999..6666..66
..9999..6666....
..9999..6666....
..9999..6666....
..9999..6666....
999999..6666....
999999..6666....
999999..6666....
999999..6666....
9999......66....
9999......66....
................`, bitmap`
....6666..444444
66..6666..444444
66..6666..444444
66666666..4444..
66666666..4444..
66666666..4444..
66666666..4444..
..666666..4444..
..666666..4444..
....6666..4444..
....6666..4444..
....6666..4444..
....6666..4444..
....66......44..
....66......44..
................`, bitmap`
44....4444..7777
4444..4444..7777
4444..4444..7777
4444444444..7777
4444444444..7777
..44444444..7777
..44444444..7777
....444444..7777
....444444..7777
......4444..7777
......4444..7777
......4444..7777
......4444..7777
......44......77
......44......77
................`, bitmap`
77........333333
..........3333..
..........3333..
7777......3333..
7777......3333..
7777......3333..
7777......3333..
..........3333..
..........3333..
77........333333
77........333333
77777777..333333
77777777..333333
777777......3333
777777......3333
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
333333..........
333333..........
3333............
3333............
................`, bitmap`
9999............
9999............
9999............
9999............
9999............
9999............
9999............
9999............
9999............
9999............
9999............
9999............
9999............
99..............
99..............
................`, bitmap`
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...`,
  bitmap`
...666666666....
..66666666666...
..66666666666...
..66666666666...
..66666666666...
..66666666666...
...666666666....
....6666666.....
.....66666......
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...`,
  bitmap`
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...`,
  bitmap`
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....
...666666666....`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................
................`, bitmap`
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...
....333333333...`,
  bitmap`
...666666666....
...666666666....
...666666666....
...666666666....
...6666666666666
...6666666666666
...6666666666666
...6666666666666
...6666666666666
...6666666666666
...6666666666666
...6666666666666
...6666666666666
................
................
................`, bitmap`
................
................
................
................
6666666666666666
6666666666666666
6666666666666666
6666666666666666
6666666666666666
6666666666666666
6666666666666666
6666666666666666
6666666666666666
................
................
................`, bitmap`
................
................
................
..........66666.
6666666..6666666
6666666.66666666
6666666666666666
6666666666666666
6666666666666666
6666666666666666
6666666666666666
6666666.66666666
6666666..6666666
..........66666.
................
................`, bitmap`
................
................
................
................
................
6...............
66..............
66..............
66..............
66..............
66..............
6...............
................
................
................
................`, bitmap`
................
................
................
..........44444.
.........4444444
........44444444
.......444444444
.......444444444
.......444444444
.......444444444
.......444444444
........44444444
.........4444444
..........44444.
................
................`, bitmap`
................
................
................
................
..44444444444444
4.44444444444444
4444444444444444
4444444444444444
4444444444444444
4444444444444444
4444444444444444
4.44444444444444
..44444444444444
................
................
................`, bitmap`
................
................
................
................
4444444444444444
4444444444444444
4444444444444444
4444444444444444
4444444444444444
4444444444444444
4444444444444444
4444444444444444
4444444444444444
................
................
................`, bitmap`
................
................
................
..........44444.
4444444..4444444
4444444.44444444
4444444444444444
4444444444444444
4444444444444444
4444444444444444
4444444444444444
4444444.44444444
4444444..4444444
..........44444.
................
................`, bitmap`
................
................
................
................
................
4...............
44..............
44..............
44..............
44..............
44..............
4...............
................
................
................
................`, bitmap`
....333333333...
....333333333...
....333333333...
......33333.....
.....3333333....
....333333333...
...33333333333..
...33333333333..
...33333333333..
...33333333333..
...33333333333..
....333333333...
.....3333333....
......33333.....
................
................`,

]


const black = "="
const background = "-"
const cursor = "_"
const circle_red = "0"
const circle_full_red = "1"
const line_red = "2"
const circle_orange = "3"
const circle_full_orange = "4"
const line_orange = "5"
const circle_yellow = "6"
const circle_full_yellow = "7"
const line_yellow = "8"
const circle_green = "9"
const circle_full_green = "a"
const line_green = "b"
const circle_blue = "c"
const circle_full_blue = "d"
const line_blue = "e"

/* --- COLOR AND SHAPE DETECTION --- */
const red_parts = [circle_red, circle_full_red, line_red]
const orange_parts = [circle_orange, circle_full_orange, line_orange]
const yellow_parts = [circle_yellow, circle_full_yellow, line_yellow]
const green_parts = [circle_green, circle_full_green, line_green]
const blue_parts = [circle_blue, circle_full_blue, line_blue]

const circle_parts = [circle_red, circle_orange, circle_yellow, circle_green, circle_blue]
const circle_full_parts = [circle_full_red, circle_full_orange, circle_full_yellow, circle_full_green, circle_full_blue]
const line_parts = [line_red, line_orange, line_yellow, line_green, line_blue]

function getColor(type) {
  if (red_parts.includes(type)) {
    return 3
  } else if (orange_parts.includes(type)) {
    return 9
  } else if (yellow_parts.includes(type)) {
    return 6
  } else if (green_parts.includes(type)) {
    return 4
  } else if (blue_parts.includes(type)) {
    return 7
  }
}

function clearBoard() {
  for (let x = 0; x < width(); x++) {
    for (let y = 0; y < height(); y++) {
      clearTile(x, y)
    }
  }
  clearText()
}

function clearColor(color) {
  switch (color) {
    case 3:
      getAll(line_red).forEach((part) => part.remove())
      getAll(circle_full_red).forEach((circle_full) => {
        addSprite(circle_full.x, circle_full.y, circle_red)
        circle_full.remove()
      })
      break
    case 9:
      getAll(line_orange).forEach((part) => part.remove())
      getAll(circle_full_orange).forEach((circle_full) => {
        addSprite(circle_full.x, circle_full.y, circle_orange)
        circle_full.remove()
      })
      break
    case 6:
      getAll(line_yellow).forEach((part) => part.remove())
      getAll(circle_full_yellow).forEach((circle_full) => {
        addSprite(circle_full.x, circle_full.y, circle_yellow)
        circle_full.remove()
      })
      break
    case 4:
      getAll(line_green).forEach((part) => part.remove())
      getAll(circle_full_green).forEach((circle_full) => {
        addSprite(circle_full.x, circle_full.y, circle_green)
        circle_full.remove()
      })
      break
    case 7:
      getAll(line_blue).forEach((part) => part.remove())
      getAll(circle_full_blue).forEach((circle_full) => {
        addSprite(circle_full.x, circle_full.y, circle_blue)
        circle_full.remove()
      })
      break
  }
}

function drawStep(x, y) {
  let sprites = getTile(getFirst(cursor).x, getFirst(cursor).y)

  for (let i = 0; i < sprites.length; i++) {
    let type = sprites[i].type

    if (type != cursor) {
      switch (draw_color) {
        case 3:
          if (type == circle_red) {
            /* finish line */
            addSprite(sprites[i].x, sprites[i].y, circle_full_red)
            sprites[i].remove()
          } else {
            clearColor(draw_color)
          }
          break
        case 9:
          if (type == circle_orange) {
            /* finish line */
            addSprite(sprites[i].x, sprites[i].y, circle_full_orange)
            sprites[i].remove()
          } else {
            clearColor(draw_color)
          }
          break
        case 6:
          if (type == circle_yellow) {
            /* finish line */
            addSprite(sprites[i].x, sprites[i].y, circle_full_yellow)
            sprites[i].remove()
          } else {
            clearColor(draw_color)
          }
          break
        case 4:
          if (type == circle_green) {
            /* finish line */
            addSprite(sprites[i].x, sprites[i].y, circle_full_green)
            sprites[i].remove()
          } else {
            clearColor(draw_color)
          }
          break
        case 7:
          if (type == circle_blue) {
            /* finish line */
            addSprite(sprites[i].x, sprites[i].y, circle_full_blue)
            sprites[i].remove()
          } else {
            clearColor(draw_color)
          }
          break
      }

      draw = false
      return

    }
  }

  /* if not returned until now, draw a line */
  switch (draw_color) {
    case 3:
      addSprite(getFirst(cursor).x, getFirst(cursor).y, line_red)
      break
    case 9:
      addSprite(getFirst(cursor).x, getFirst(cursor).y, line_orange)
      break
    case 6:
      addSprite(getFirst(cursor).x, getFirst(cursor).y, line_yellow)
      break
    case 4:
      addSprite(getFirst(cursor).x, getFirst(cursor).y, line_green)
      break
    case 7:
      addSprite(getFirst(cursor).x, getFirst(cursor).y, line_blue)
      break
  }
}

function checkWin() {
  /* if all fields have either a full circle or line -> won */
  for (let x = 0; x < width(); x++) {
    for (let y = 0; y < height(); y++) {
      let sprites = getTile(x, y).filter((part) => part.type != cursor)

      if (sprites.length == 0) {
        return false
      }

      for (let i = 0; i < sprites.length; i++) {
        if (circle_full_parts.includes(sprites[i].type) || line_parts.includes(sprites[i].type)) {
          continue
        } else {
          return false
        }
      }
    }
  }

  return true
}

function showStart() {
  running = false
  clearBoard()
  setBackground("=")
  setMap(levels[0])
  addText("to start", {
    x: 6,
    y: 9,
    color: color`3`
  })
  addText("press l >", {
    x: 6,
    y: 11,
    color: color`3`
  })
  addText("press k for help", {
    x: 2,
    y: 13,
    color: color`3`
  })
}

function showHelp(step = 0) {
  switch (step) {
    case 0:
      help = true
      running = false
      clearBoard()
      setBackground("=")
      addText("at any time", {
        x: 4,
        y: 6,
        color: color`3`
      })
      addText("press l >", {
        x: 5,
        y: 8,
        color: color`3`
      })
      addText("to play", {
        x: 6,
        y: 10,
        color: color`3`
      })
      addText("continues in 3s", {
        x: 2,
        y: 13,
        color: color`3`
      })
      setTimeout(() => { showHelp(1) }, 3000)
      break
    case 1:
      if (!help) { return }
      clearBoard()
      setMap(levels[0])
      addText("Welcome to the", {
        x: 3,
        y: 9,
        color: color`3`
      })
      addText("Color Connect", {
        x: 4,
        y: 11,
        color: color`3`
      })
      addText("help", {
        x: 8,
        y: 13,
        color: color`3`
      })
      setTimeout(() => { showHelp(2) }, 3000)
      break
    case 2:
      if (!help) { return }
      clearBoard()
      setBackground("=")
      addText("goal of the game:", {
        x: 1,
        y: 1,
        color: color`3`
      })
      addText("- connect each", {
        x: 1,
        y: 4,
        color: color`3`
      })
      addText("  color pair", {
        x: 1,
        y: 6,
        color: color`3`
      })
      addText("- every square", {
        x: 1,
        y: 8,
        color: color`3`
      })
      addText("  is filled", {
        x: 1,
        y: 10,
        color: color`3`
      })
      setTimeout(() => { showHelp(3) }, 5000)
      break
    case 3:
      if (!help) { return }
      clearBoard()
      setBackground("=")
      addText("controls:", {
        x: 1,
        y: 1,
        color: color`3`
      })
      addText("W-A-S-D", {
        x: 1,
        y: 4,
        color: color`3`
      })
      addText("- move cursor", {
        x: 1,
        y: 6,
        color: color`3`
      })
      addText("\"J\"", {
        x: 1,
        y: 8,
        color: color`3`
      })
      addText("- previous level", {
        x: 1,
        y: 10,
        color: color`3`
      })
      addText("\"L\"", {
        x: 1,
        y: 12,
        color: color`3`
      })
      addText("- next level", {
        x: 1,
        y: 14,
        color: color`3`
      })
      setTimeout(() => { showHelp(4) }, 5000)
      break
    case 4:
      if (!help) { return }
      clearBoard()
      setBackground("=")
      addText("controls (contin.):", {
        x: 1,
        y: 1,
        color: color`3`
      })
      addText("\"I\"", {
        x: 1,
        y: 4,
        color: color`3`
      })
      addText("- on empty circle", {
        x: 1,
        y: 6,
        color: color`3`
      })
      addText(" start drawing line", {
        x: 1,
        y: 8,
        color: color`3`
      })
      addText("- on full circle", {
        x: 1,
        y: 10,
        color: color`3`
      })
      addText("  clear color", {
        x: 1,
        y: 12,
        color: color`3`
      })
      setTimeout(() => { showStart() }, 5000)
      break
  }
}

function showWin() {
  running = false
  clearBoard()
  setBackground("=")
  addText("Y", {
    x: 6,
    y: 4,
    color: color`3`
  })
  addText("O", {
    x: 7,
    y: 4,
    color: color`9`
  })
  addText("U", {
    x: 8,
    y: 4,
    color: color`6`
  })
  addText("W", {
    x: 10,
    y: 4,
    color: color`4`
  })
  addText("O", {
    x: 11,
    y: 4,
    color: color`7`
  })
  addText("N", {
    x: 12,
    y: 4,
    color: color`3`
  })
  addText("!", {
    x: 13,
    y: 4,
    color: color`9`
  })
  addText("again    next", {
    x: 3,
    y: 7,
    color: color`3`
  })
  addText("< j     l >", {
    x: 4,
    y: 9,
    color: color`3`
  })
  addText("k", {
    x: 9,
    y: 11,
    color: color`3`
  })
  addText("v", {
    x: 9,
    y: 12,
    color: color`3`
  })
  addText("show help", {
    x: 5,
    y: 14,
    color: color`3`
  })
}

/* --- SETUP --- */
setLegend(
  [black, bitmap`
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000
0000000000000000`],
  [background, bitmap`
L00LL00LL00LL00L
0000000000000000
0000000000000000
L00000000000000L
L00000000000000L
0000000000000000
0000000000000000
L00000000000000L
L00000000000000L
0000000000000000
0000000000000000
L00000000000000L
L00000000000000L
0000000000000000
0000000000000000
L00LL00LL00LL00L`],
  [cursor, bitmap`
1111111111111111
111..........111
11............11
1..............1
1..............1
1..............1
1..............1
1..............1
1..............1
1..............1
1..............1
1..............1
1..............1
11............11
111..........111
1111111111111111`],
  [circle_red, circle_bitmap.replaceAll("0", "3")],
  [circle_full_red, circle_full_bitmap.replaceAll("0", "3")],
  [line_red, line_bitmap.replaceAll("0", "3")],
  [circle_orange, circle_bitmap.replaceAll("0", "9")],
  [circle_full_orange, circle_full_bitmap.replaceAll("0", "9")],
  [line_orange, line_bitmap.replaceAll("0", "9")],
  [circle_yellow, circle_bitmap.replaceAll("0", "6")],
  [circle_full_yellow, circle_full_bitmap.replaceAll("0", "6")],
  [line_yellow, line_bitmap.replaceAll("0", "6")],
  [circle_green, circle_bitmap.replaceAll("0", "4")],
  [circle_full_green, circle_full_bitmap.replaceAll("0", "4")],
  [line_green, line_bitmap.replaceAll("0", "4")],
  [circle_blue, circle_bitmap.replaceAll("0", "7")],
  [circle_full_blue, circle_full_bitmap.replaceAll("0", "7")],
  [line_blue, line_bitmap.replaceAll("0", "7")],
  ["f", start_screen[0]],
  ["g", start_screen[1]],
  ["h", start_screen[2]],
  ["i", start_screen[3]],
  ["j", start_screen[4]],
  ["k", start_screen[5]],
  ["l", start_screen[6]],
  ["m", start_screen[7]],
  ["n", start_screen[8]],
  ["o", start_screen[9]],
  ["p", start_screen[10]],
  ["q", start_screen[12]],
  ["r", start_screen[13]],
  ["s", start_screen[14]],
  ["t", start_screen[15]],
  ["u", start_screen[16]],
  ["v", start_screen[17]],
  ["w", start_screen[19]],
  ["x", start_screen[20]],
  ["y", start_screen[21]],
  ["z", start_screen[22]],
  ["A", start_screen[23]],
  ["B", start_screen[24]],
  ["C", start_screen[25]],
  ["D", start_screen[26]],
  ["E", start_screen[27]],
  ["F", start_screen[28]],
  ["G", start_screen[29]],
  ["H", start_screen[30]],
  ["I", start_screen[31]],
  ["J", start_screen[32]],
  ["K", start_screen[33]],
  ["L", start_screen[34]],
  ["M", start_screen[35]],
  ["N", start_screen[36]],
  ["O", start_screen[37]],
  ["P", start_screen[38]],
  ["Q", start_screen[39]],
  ["R", start_screen[40]],
  ["S", start_screen[49]],
  ["T", start_screen[50]],
  ["U", start_screen[59]],
  ["V", start_screen[60]],
  ["W", start_screen[69]],
  ["X", start_screen[70]],
  ["Y", start_screen[71]],
  ["Z", start_screen[72]],
  ["?", start_screen[73]],
  ["!", start_screen[74]],
  ["{", start_screen[75]],
  ["}", start_screen[76]],
  ["[", start_screen[77]],
  ["]", start_screen[78]],
  ["$", start_screen[79]]
)

setSolids([])

const levels = [
  map`
fghijklmno
p.qrstuv.w
xyzABCDEFG
HIJKLMNOPQ
R........S
T........U
V........W
XYZ?!{}[]$`,
  map`
.........6
..........
....3..c..
..........
....9.....
.....0c...
6.....3...
0.9.......`,
  map`
..........
.c..6.....
...90.....
3.....3...
0.....c...
..........
..........
69........`,
  map`
..........
.0......0.
.3......3.
.6......6.
.9......9.
.c......c.
..........
..........`,
  map`
.6.9c.....
..........
.......3..
...0......
..........
..0....c..
....9...3.
....6.....`,
  map`
.93...0...
.6..c...6.
..........
..........
..3.......
..........
.c.......0
.........9`,
  map`
6.........
..........
..........
..........
..........
..........
..........
6.........`
]


/* --- GAME START --- */
let level = 0
let draw = false
let move = false
let running = false
let help = false
let draw_color = 0

let start = false
showStart()

/* --- INPUT REACTIONS --- */
onInput("w", () => {
  if (running) {
    getFirst(cursor).y -= 1
    move = true
  }
})

onInput("a", () => {
  if (running) {
    getFirst(cursor).x -= 1
    move = true
  }
})

onInput("s", () => {
  if (running) {
    getFirst(cursor).y += 1
    move = true
  }
})

onInput("d", () => {
  if (running) {
    getFirst(cursor).x += 1
    move = true
  }
})

onInput("i", () => {
  if (running) {
    if (draw) {
      draw = false
      clearColor(draw_color)
    }
    let sprites = getTile(getFirst(cursor).x, getFirst(cursor).y)
    for (let i = 0; i < sprites.length; i++) {
      let type = sprites[i].type

      if (circle_full_parts.includes(type)) {
        /* if clicked on a full circle -> unconnect everything of this color */
        clearColor(getColor(type))
      } else if (circle_parts.includes(type)) {
        /* if clicked on an empty circle -> start drawing */
        draw = true
        draw_color = getColor(type)

        switch (draw_color) {
          case 3:
            addSprite(sprites[i].x, sprites[i].y, circle_full_red)
            break
          case 9:
            addSprite(sprites[i].x, sprites[i].y, circle_full_orange)
            break
          case 6:
            addSprite(sprites[i].x, sprites[i].y, circle_full_yellow)
            break
          case 4:
            addSprite(sprites[i].x, sprites[i].y, circle_full_green)
            break
          case 7:
            addSprite(sprites[i].x, sprites[i].y, circle_full_blue)
            break
        }
        sprites[i].remove()
      }
    }
  }
})

onInput("j", () => {
  if (level > 1) {
    level -= 1
    start = true
  }
})

onInput("l", () => {
  help = false

  if (level < levels.length - 1) {
    level += 1
    start = true
  } else {
    running = false
    clearBoard()
    setBackground("=")
    setMap(levels[0])
    addText("you played", {
      x: 5,
      y: 10,
      color: color`3`
    })
    addText("all levels!", {
      x: 5,
      y: 12,
      color: color`3`
    })
  }
})

onInput("k", () => {
  if (!help) {
    showHelp()
  }
})

afterInput(() => {
  /* first input after showing start/win menu */
  if (start) {
    start = false
    running = true
    clearBoard()
    setBackground(background)
    setMap(levels[level])
    addSprite(0, 0, cursor)
  }

  /* if a move occured (non-config key) */
  if (move) {
    move = false
    if (draw) {
      drawStep(getFirst(cursor).x, getFirst(cursor).y)
    }

    if (checkWin()) {
      showWin()
    }
  }
})
